import {
    reactive,
    watchEffect
} from "vue"
// 缓存操作
const todoStorage = {
    getTodos() {
        let todos = JSON.parse(localStorage.getItem("todos") || "[]");
        todos.forEach((item, index) => {
            item.id = index + 1;
        });
        return todos;
    },
    setTodos(todos) {
        localStorage.setItem("todos", JSON.stringify(todos));
    },
};

export function useTodos(state) {
    const todos = reactive(todoStorage.getTodos())
    // 添加待办
    function addTodo() {
        todos.push({
            id: todos.length + 1,
            title: state.newTodo,
            complete: false,
        });
        state.newTodo = "";
    }

    // 删除待办
    function removeTodo(item) {        
        todos.splice(todos.indexOf(item), 1);
    }

    watchEffect(() => {
        todoStorage.setTodos(todos);
    });
    return {
        todos,
        addTodo,
        removeTodo
    }
}